<!DOCTYPE html>
<html>
<!--    线体看板PC端-->
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 测试 清缓存，正式要去掉 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>EasyWeb后台开发框架</title>
    <!--    <meta http-equiv="refresh" content="1">-->
    <!--    iview-css-->
    <link rel="stylesheet" href="/kbs/assets/libs/iview/iview.css"/>

    <!--    myCss-->
    <link rel="stylesheet" href="/kbs/assets/css/benjamin.css"/>

    <!--    iview-icon-->
    <!--    iview用的是ionicons4.0.0.2版本的woff2-->
    <!--    <link href="https://cdn.bootcss.com/ionicons/4.0.0-2/css/ionicons.css" rel="stylesheet">-->
    <!--    <link rel="stylesheet" href="/kbs/assets/libs/iview/icon.css"/>-->

    <!--    layui-css-->
    <!--    <link rel="stylesheet" href="/kbs/assets/libs/layui/css/layui.css"/>-->

    <!--    admin-css-->
    <!--    <link rel="stylesheet" href="/kbs/assets/module/admin.css?v=312"/>-->

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .ivu-table-small td {
            height: 26px;
        }

        .ivu-table .runStatusTrue {
            /*background-color: #000000; !important;*/
            color: #006988;
        }

        .ivu-table .runStatusFalse {
            /*background-color: #000000; !important;*/
            color: red;
        }

        /*.ivu-table-stripe .ivu-table-body tr:nth-child(2n) .runStatus, .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) .runStatus{
            background-color: #000000; !important;
            color: #f40;
        }*/

    </style>
</head>

<body>

<div id="app">
    <template>
        <div style="background:#eee;padding: 7px">
            <Row>
                <i-col span="24">
                    <Card style="height: 63px">
                        <div>
                            <Row>
                                <i-col span="3" style="line-height: 30px">
                                    <i-select size="default" v-model="selected" :label-in-value="true"
                                              @on-change="changge">
                                        <i-option v-for="line in line " :value="line.code" :label="line.name">
                                            {{line.name}}
                                        </i-option>
                                    </i-select>
                                </i-col>
                                <i-col span="18"
                                       style="text-align: center;color:#000 ;font-size: 27px; line-height: 30px">
                                    创维自主MES系统 车间看板
                                </i-col>
                                <i-col span="3">
                                    <div id="time" style="line-height: 30px"></div>
                                </i-col>
                            </Row>
                        </div>
                    </Card>
                </i-col>
            </Row>
            <Row>
                <i-col span="4">
                    <Card style="margin-top: 4px">
                        <Row>
                            <i-col span="24">
                                <div class="center-yvan">
                                    <div style="font-size: 17px">
                                        总计划量
                                    </div>
                                    <div style="margin: 4px; margin-bottom: -10px;font-size: 27px">
                                        {{totalLine.totalPlan}}
                                    </div>
                                </div>
                            </i-col>
                        </Row>
                    </Card>
                </i-col>
                <i-col span="4">
                    <Card style="margin-top: 4px; margin-left: 5px">
                        <Row>
                            <i-col span="24">
                                <div class="center-yvan">
                                    <div style="font-size: 17px">
                                        总投产量
                                    </div>
                                    <div style="margin: 4px; margin-bottom: -10px;font-size: 27px">
                                        {{totalLine.totalTl}}
                                    </div>
                                </div>
                            </i-col>
                        </Row>
                    </Card>
                </i-col>
                <i-col span="4">
                    <Card style="margin-top: 4px; margin-left: 5px">
                        <Row>
                            <i-col span="24">
                                <div class="center-yvan">
                                    <div style="font-size: 17px">
                                        总产出量
                                    </div>
                                    <div style="margin: 4px; margin-bottom: -10px;font-size: 27px">
                                        {{totalLine.totalWg}}
                                    </div>
                                </div>
                            </i-col>
                        </Row>
                    </Card>
                </i-col>
                <i-col span="4">
                    <Card style="margin-top: 4px; margin-left: 5px">
                        <Row>
                            <i-col span="24">
                                <div class="center-yvan">
                                    <div style="font-size: 17px">
                                        总计划达成率
                                    </div>
                                    <div style="margin: 4px; margin-bottom: -10px;font-size: 27px">
                                        {{totalLine.totalPlanAchin}}
                                    </div>
                                </div>
                            </i-col>
                        </Row>
                    </Card>
                </i-col>
                <i-col span="4">
                    <Card style="margin-top: 4px; margin-left: 5px">
                        <Row>
                            <i-col span="24">
                                <div class="center-yvan">
                                    <div style="font-size: 17px">
                                        总直通率
                                    </div>
                                    <div style="margin: 4px; margin-bottom: -10px;font-size: 27px">
                                        {{totalLine.totalPassRate}}
                                    </div>
                                </div>
                            </i-col>
                        </Row>
                    </Card>
                </i-col>
                <i-col span="4">
                    <Card style="margin-top: 4px;margin-left: 5px">
                        <Row>
                            <i-col span="24">
                                <div class="center-yvan">
                                    <div style="font-size: 17px">
                                        总工时效率
                                    </div>
                                    <div style="margin: 4px; margin-bottom: -10px;font-size: 27px">
                                        {{totalLine.totalWorkEff}}
                                    </div>
                                </div>
                            </i-col>
                        </Row>
                    </Card>
                </i-col>
            </Row>
            <Row>
                <i-col span="24">
                    <Card style="height:375px; margin-top: 5px ;">
                        <i-Table stripe :columns="columns" :data="dataLine" size="small" border height="350"></i-Table>
                    </Card>
                </i-col>
            </Row>
            <Row>
                <i-col span="12" v-show="true">
                    <Card style="margin-top: 5px;height: 340px">
                        <Row>
                            <i-col span="24">
                                <div id="hdqkyc1" style="width:100%;height: 240px;"></div>
                            </i-col>
                            <i-col span="24">
                                <Row>
                                    <i-col span="2">
                                        &nbsp;&nbsp;&nbsp;
                                    </i-col>
                                    <i-col span="22">
                                        <span v-for="lineName in lineByCode" class="libinglin"
                                              :style="'width:' + percent + '%'">{{lineName.lineName}}</span>
                                    </i-col>
                                </Row>
                            </i-col>
                            <i-col span="24">
                                <Row>
                                    <i-col span="2">
                                        <span v-show="isShow"
                                              style="font-size: 10px; margin-left: -10px; line-height: 25px;">
                                            生产自然台
                                        </span>
                                    </i-col>
                                    <i-col span="22">
                                        <span v-for="lineName in lineByCode" class="libinglin-1"
                                              :style="'width:' + percent + '%'">{{lineName.scZiRanTai}}</span>
                                    </i-col>
                                </Row>
                            </i-col>
                            <i-col span="24">
                                <Row>
                                    <i-col span="2">
                                        <span v-show="isShow"
                                              style="font-size: 10px; margin-left: -10px; line-height: 25px;">
                                            生产标台数
                                        </span>
                                    </i-col>
                                    <i-col span="22">
                                        <span v-for="lineName in lineByCode" class="libinglin-1"
                                              :style="'width:' + percent + '%'">{{lineName.scBiaoTaiShu}}</span>
                                    </i-col>
                                </Row>
                            </i-col>
                        </Row>
                    </Card>
                </i-col>
                <i-col span="12">
                    <Row>
                        <i-col span="24">
                            <Card style="margin-top: 5px ; margin-left: 5px">
                                <Row>
                                    <i-col span="24">
                                        <div id="hdqkyc" style="width:100%;height: 307px;"></div>
                                    </i-col>
                                    <!--<i-col span="24">
                                        <Row>
                                            <i-col span="2">
                                                &nbsp;&nbsp;&nbsp;
                                            </i-col>
                                            <i-col span="22">
                                                <span v-for="lineName in lineByCode" class="libinglin"
                                                      :style="'width:' + percent + '%'">{{lineName.lineName}}</span>
                                            </i-col>
                                        </Row>
                                    </i-col>
                                    <i-col span="24">
                                        <Row>
                                            <i-col span="2">
                                                <span style="font-size: 10px; margin-left: -10px; line-height: 25px;">
                                                    计划达成率
                                                </span>
                                            </i-col>
                                            <i-col span="22">
                                                <span v-for="lineName in lineByCode" class="libinglin-1"
                                                      :style="'width:' + percent + '%'">{{lineName.planAchin}}</span>
                                            </i-col>
                                        </Row>
                                    </i-col>
                                    <i-col span="24">
                                        <Row>
                                            <i-col span="2">
                                                <span style="font-size: 10px; margin-left: -10px; line-height: 25px;">
                                                    工时效率
                                                </span>
                                            </i-col>
                                            <i-col span="22">
                                                <span v-for="lineName in lineByCode" class="libinglin-1"
                                                      :style="'width:' + percent + '%'">{{lineName.workEff}}</span>
                                            </i-col>
                                        </Row>
                                    </i-col>
                                    <i-col span="24">
                                        <Row>
                                            <i-col span="2">
                                                <span style="font-size: 10px; margin-left: -10px; line-height: 25px;">
                                                    直通率
                                                </span>
                                            </i-col>
                                            <i-col span="22">
                                                <span v-for="lineName in lineByCode" class="libinglin-1"
                                                      :style="'width:' + percent + '%'">{{lineName.passRate}}</span>
                                            </i-col>
                                        </Row>
                                    </i-col>-->
                                </Row>
                            </Card>
                        </i-col>
                    </Row>
                </i-col>
            </Row>

        </div>
    </template>
</div>

</body>
<!-- js部分 -->
<!--<script type="text/javascript" src="/kbs/assets/libs/layui/layui.js"></script>-->
<script type="text/javascript" src="/kbs/assets/libs/jquery/jquery.js"></script>
<script src="/kbs/assets/libs/vue/vue.js"></script>
<script type="text/javascript" src="/kbs/assets/libs/iview/iview.js"></script>
<script type="text/javascript" src="/kbs/assets/libs/echarts/echarts.js"></script>
<script type="text/javascript" src="/kbs/assets/libs/echarts/echartsTheme.js"></script>
<script type="text/javascript" src="/kbs/assets/js/util.js?"+Math.random();></script>
<script type="text/javascript" src="/kbs/assets/js/tools.js?"+Math.random();></script>

<script>
    window.setInterval("yvan.getDynamicTime()", 1000);//每隔1秒，调用一次getDateDemo()
</script>
<script>
    var qgInter;
    var vm = new Vue({
        el: '#app',
        data: {
            isShow: false,       // 生产自然台和生产标台数是否显示
            visible: false,
            line: '',           // 下拉框的line
            lineByCode: '',      // 具体某个车间下的某条线体的具体信息
            totalLine: '',        // 整个车间的信息
            selected: '',
            percent: '',
            columns: [
                {
                    title: '整机线体',
                    key: 'lineName',
                    align: 'center'
                },
                {
                    title: '基本信息',
                    align: 'center',
                    children: [
                        {
                            title: '线长',
                            key: 'lineMasterName',
                            align: 'center'
                        },
                        {
                            title: '人数',
                            key: 'linePersonNumber',
                            align: 'center'
                        },
                        {
                            title: '线体状态',
                            key: 'runStatus',
                            align: 'center'
                        },
                        {
                            title: '工作时间',
                            key: 'lineRunDuration',
                            align: 'center'
                        }
                    ]
                },
                {
                    title: '计划信息',
                    align: 'center',
                    children: [
                        {
                            title: '计划量',
                            key: 'todayPlanMng',
                            align: 'center'
                        },
                        {
                            title: '投产量',
                            key: 'todayTlmng',
                            align: 'center'
                        },
                        {
                            title: '产出量',
                            key: 'todayWgmng',
                            align: 'center'
                        },
                        {
                            title: '计划达成率',
                            key: 'planAchin',
                            align: 'center'
                        },
                    ]
                },
                {
                    title: '效率信息',
                    align: 'center',
                    children: [
                        {
                            title: '产出工时',
                            key: 'todayProductTime',
                            align: 'center'
                        },
                        {
                            title: '投入工时',
                            key: 'todayWorkTime',
                            align: 'center'
                        },
                        {
                            title: '工时效率',
                            key: 'workEff',
                            align: 'center'
                        },
                    ]
                },
                {
                    title: '质量信息',
                    align: 'center',
                    children: [
                        {
                            title: '不良数',
                            key: 'todayYcmng',
                            align: 'center'
                        },
                        {
                            title: '直通率',
                            key: 'passRate',
                            align: 'center'
                        },
                    ]
                }
            ],
            dataLine: []
        },
        created: function () {
            // 先检测cookie
            yvan.passCookie();
            // 检测浏览器
            // yvan.passChrome();

            // 请求车间信息 -- 用于下拉框的车间选择显示
            util.requestget('/safe_usercenter/base/getOrganizeViewByDataType?dataType=5', function (e) {
                var line = e.result;
                vm.line = line;
            });
        },
        methods: {
            show: function () {
                this.visible = true;
            },
            changge: function (res) {
                vm.isShow = true;       // 显示生产自然台和生产标台数
                var xData = [];         // eCharts的X轴
                var dataData = {};      // eCharts的data数据
                dataData.planAchin = [];    // eCharts 计划达成率
                dataData.workEff = [];      // eCharts 工时效率
                dataData.passRate = [];     // eCharts 直通率
                dataData.scZiRanTai = [];   // eCharts 生产自然台
                dataData.scBiaoTaiShu = []; // eCharts 生产标台数
                // var aa = {lineName:'asdads'};
                // 开始请求 -- 车间下的所有线体的数据
                function qg() {
                    util.requestget('/mes/kb/getRealProductInfoGroupFactorySubDepartment?code=' + res.value, function (e) {
                        // 清空数据源
                        {
                            xData = [];         // eCharts的X轴
                            dataData = {};      // eCharts的data数据
                            dataData.planAchin = [];    // eCharts 计划达成率
                            dataData.workEff = [];      // eCharts 工时效率
                            dataData.passRate = [];     // eCharts 直通率
                            dataData.scZiRanTai = [];   // eCharts 生产自然台
                            dataData.scBiaoTaiShu = []; // eCharts 生产标台数
                        }

                        var addObj = {};    // 合计新对象
                        addObj.lineRunDuration = 0;
                        addObj.linePersonNumber = 0;
                        vm.lineByCode = e.result;   // 图表数据源
                        vm.dataLine = e.result.slice(0);     // 表格数据源  -- 重新拷贝一份数组
                        vm.percent = (100 / e.result.length);   // 划分表格百分数css
                        var totalLine = {      // 车间全部线体的总信息
                            totalPlan: 0,
                            totalTl: 0,
                            totalWg: 0,
                            totalPlanAchin: 0,
                            totalPassRate: 0,
                            totalWorkEff: 0,
                            totalYc: 0,
                            todayProductTime: 0,
                            todayWorkTime: 0
                        };
                        for (var i = 0; i < e.result.length; i++) {

                            // 各类合计信息统计
                            addObj.linePersonNumber += parseInt(e.result[i].linePersonNumber);
                            addObj.lineRunDuration += parseInt(e.result[i].lineRunDuration);


                            // totalLine 传值
                            totalLine.totalPlan += e.result[i].todayPlanMng;        // 总计划
                            totalLine.totalTl += e.result[i].todayTlmng;            // 总投入
                            totalLine.totalWg += e.result[i].todayWgmng;            // 总产出
                            totalLine.totalYc += e.result[i].todayYcmng;            // 总异常
                            totalLine.todayProductTime += e.result[i].todayProductTime;     // 总产出时间  台数*sap时间
                            totalLine.todayWorkTime += e.result[i].todayWorkTime;           // 总工作时间

                            // 三个率以及表格参数设置
                            var planAchin = e.result[i].todayPlanMng ? yvan.toPercent((e.result[i].todayWgmng / e.result[i].todayPlanMng), 1) : yvan.toPercent(0, 1); // 计划达成率
                            var workEff = e.result[i].todayWorkTime ? yvan.toPercent(((e.result[i].todayProductTime) / (e.result[i].todayWorkTime)), 1) : yvan.toPercent(0, 1); // 工时效率
                            var passRate = e.result[i].todayWgmng ? yvan.toPercent((1 - (e.result[i].todayYcmng / e.result[i].todayWgmng)), 1) : yvan.toPercent(0, 1); // 直通率
                            vm.lineByCode[i].planAchin = planAchin;
                            vm.lineByCode[i].workEff = workEff;
                            vm.lineByCode[i].passRate = passRate;
                            if (e.result[i].lineRunStatus == 0) {
                                vm.lineByCode[i].runStatus = "停止";
                                vm.dataLine[i].cellClassName = {
                                    runStatus: 'runStatusFalse'
                                }
                            } else {
                                vm.lineByCode[i].runStatus = "运行";
                                vm.dataLine[i].cellClassName = {
                                    runStatus: 'runStatusTrue'
                                }
                            }

                            // x轴的参数说明
                            xData.push(e.result[i].lineName);

                            // 图表三率的传值
                            dataData.planAchin.push(parseFloat(planAchin));
                            dataData.workEff.push(parseFloat(workEff));
                            dataData.passRate.push(parseFloat(passRate));

                            // 生产自然台和生产标台数传值
                            dataData.scZiRanTai.push(e.result[i].todayWgmng);
                            dataData.scBiaoTaiShu.push(parseInt((e.result[i].todayProductTime / 78.88).toFixed(1)));
                            vm.lineByCode[i].scZiRanTai = dataData.scZiRanTai[i];
                            vm.lineByCode[i].scBiaoTaiShu = dataData.scBiaoTaiShu[i];
                        }

                        // total剩余的三个率
                        totalLine.totalPlanAchin = totalLine.totalPlan == 0 ? yvan.toPercent(0, 1) : yvan.toPercent((totalLine.totalWg / totalLine.totalPlan), 1);                 // 总计划达成率
                        totalLine.totalPassRate = totalLine.totalWg == 0 ? yvan.toPercent(0, 1) : yvan.toPercent((1 - (totalLine.totalYc / totalLine.totalWg)), 1);              // 总直通率
                        totalLine.totalWorkEff = totalLine.todayWorkTime == 0 ? yvan.toPercent(0, 1) : yvan.toPercent(((totalLine.todayProductTime) / (totalLine.todayWorkTime)), 1);      // 总工时效率

                        // 赋值
                        vm.totalLine = totalLine;

                        // 表格合计
                        addObj.lineName = '合计';
                        addObj.lineMasterName = 'N/A';
                        addObj.runStatus = 'N/A';
                        addObj.todayPlanMng = totalLine.totalPlan;
                        addObj.todayTlmng = totalLine.totalTl;
                        addObj.todayWgmng = totalLine.totalWg;
                        addObj.planAchin = totalLine.totalPlanAchin;
                        addObj.todayProductTime = totalLine.todayProductTime.toFixed(1);
                        addObj.todayWorkTime = totalLine.todayWorkTime;
                        addObj.workEff = totalLine.totalWorkEff;
                        addObj.todayYcmng = totalLine.totalYc;
                        addObj.passRate = totalLine.totalPassRate;

                        vm.dataLine.push(addObj);

                        /* 图表渲染 */
                        yvan.getMyChartsL('hdqkyc1', {
                            text: '整机部当日各线实时产出',
                            legend: {
                                data: ['生产自然台', '生产标台数']
                            },
                            xData: xData,
                            scZiRanTai: dataData.scZiRanTai,
                            scBiaoTaiShu: dataData.scBiaoTaiShu
                        });     // 左边的图表
                        yvan.getMyChartsR('hdqkyc', {
                            text: '整机部当日各线信息统计',
                            legend: {
                                data: ['计划达成率', '工时效率', '直通率']
                            },
                            xData: xData,
                            planAchin: dataData.planAchin,
                            workEff: dataData.workEff,
                            passRate: dataData.passRate
                        });     // 右边的图表
                    });
                }

                qg();
                // 启动定时器
                clearInterval(qgInter);
                qgInter = setInterval(function () {
                    qg();
                    yvan.passCookie();
                }, 5000);
            }
        }
    })


</script>
</html>
